<template>
  <n-card
    :bordered="false"
    header-style="padding-bottom: 0px"
    content-style="padding: 0px 24px 10px 72px"
    hoverable
  >
    <template #header
      ><n-space>
        <n-avatar
          :style="{
            color: 'yellow',
          }"
          size="large"
          lazy
          :src="essay.author_photo"
        >
        </n-avatar>
        <div class="title">
          <div>{{ essay.author_nickname }}</div>
          <n-text class="dyn-time">
            <n-text
              v-if="essay.collection"
              class="dyn-time"
              @click="to_collection_essay(essay.collection.id)"
              >{{ essay.collection.name }} ·
            </n-text>

            <n-time
              :time="essay.create_time"
              @click="to_essay_detail(essay.id)"
            ></n-time
          ></n-text>
        </div> </n-space
    ></template>
    <template #header-extra v-if="$store.state.user.is_staff">
      <n-space vertical
        ><n-tag size="small" :type="essay.is_active ? 'success' : 'default'">
          {{ essay.is_active ? "√ 广播中" : "一 未广播" }}
        </n-tag>
        <n-button
          v-if="type == 'edit'"
          type="primary"
          dashed
          @click="to_essay_edit(essay.id)"
        >
          编辑&nbsp; <n-text depth="3"> #{{ essay.id }}</n-text>
        </n-button>
      </n-space>
    </template>
    <!-- <n-text @click="to_essay_detail(essay.id)" style="cursor: pointer">{{
      essay.content
    }}</n-text> -->
    <v-md-preview :text="essay.content" @click="to_essay_detail(essay.id)" />
    <template #footer>
      <n-space size="small">
        <template v-for="badge of essay.badges" :key="badge.badge">
          <n-tag
            class="click"
            v-if="$store.state.badge.dirt[badge.badge]"
            :type="$store.state.badge.dirt[badge.badge].type"
            size="small"
            round
            @click="to_badge_content(badge.badge)"
            >{{ $store.state.badge.dirt[badge.badge].name }} |
            {{ badge.count }}</n-tag
          ></template
        >
      </n-space>
    </template>
  </n-card>
</template>

<script>
import routerJump from "@/composables/RouterJump";

export default {
  props: {
    essay: {
      type: Object,
      requried: true,
    },
    type: {
      type: String,
    },
  },
  setup() {
    const {
      to_badge_content,
      to_essay_detail,
      to_essay_edit,
      to_collection_essay,
    } = routerJump();

    return {
      to_essay_detail,
      to_badge_content,
      to_essay_edit,
      to_collection_essay,
    };
  },
};
</script>

<style scoped>
.dyn-time {
  color: #99a2aa;
  cursor: pointer;
  font-size: 12px;
  margin-top: 0px;
}
.title {
  line-height: 1;
  padding-top: 5px;
}
.click {
  cursor: pointer;
}
.content {
  cursor: pointer;
  padding: 0px;
}
:deep(.vuepress-markdown-body) {
  font-size: 14px;
}
:deep(.vuepress-markdown-body:not(.custom)) {
  padding: 0px;
}
</style>